<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>酷睿影评</title> 
  <meta name="referrer" content="never">
  <style>
  *{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    /*height: 100%;*/
    /*overflow: hidden;*/
    position: relative;
  }
  #container{ /*固定宽度且居中*/
    width: 1200px;
    margin: 0 auto;
    /*background: #e3ebec;*/

  }
  #header{
    height: 115px;
    background: #08231;
  }
  #middle{
    display: flex;
    height: 1730px;
  }
  #left{
    width: 70%;
    min-height: 500px;
    overflow: hidden;/*隐藏超出部分*/
    /*background: yellow;*/
  }
  #right{
    width: 30%;
    /*background: blue;*/
    min-height: 500px;
  }
  #footer{
    height: 150px;
    /*background: black;*/
  }
  #logo{    
    width: 261px;
        margin: 20px;
  }
  .row{
    display: flex;
  }
  .input_group{
    display: flex;
    height: 32px;
    width: 500px;
    position: absolute;
    left: 35%;
    top: 50px;
    margin-top: 5px;
    border-radius: 5px;
    left: 28%;
    top: 21px
  }
  #search_txt{
        width: 80%;
        height: 32px;       
        font-weight: bold;        
        padding-left: 20px;       
        border: #35a5e5 1px solid;
        outline: none;
        box-shadow: 0 0 5px rgba(81, 203, 238, 1);
        
  }
  #search_btn{
        width: 16%;
        height: 34px;               
        border:none;       
        background: rgba(81, 203, 238, 1);
        color: white;       
        font: 14px '微软雅黑';
        margin-top: 0px;
        box-shadow: 0 0 5px rgba(81, 203, 238, 1);
        cursor: pointer;
        
  }

  #search_btn:hover {
    background: rgba(39, 154, 187, 1);
}

  

  #product_detail{
    width: 50%;
    padding: 10px;
  }
  #product_detail>ul{
    display: flex;
    flex-wrap:wrap;
  }
  #product_detail>ul>li{
    width: 50%;
  }
  #img_div{
    width: 50%;
    
  }
  
  #zzry > ul {

    display: flex;
    flex-wrap:wrap;
    left: 40px;
    width: 800px;
    height: 460px;
  }
  #zzry > ul > div > li{
    display: flex;
    flex-wrap:wrap; /*flex布局换行  默认是不换行*/
    width: 150px;
    height: 160px;   
    margin:0px 15px;
    

  }
  #zzry > ul > div > li:hover{
    border:0px solid #00bcd4;
    box-shadow: 0px 0px 15px 0px #00bcd4;
    cursor:pointer;
  }
  #zzry > ul > div{
    display: flex;
    flex-wrap:wrap;
    width: 150px;
    height: 180px;
    padding-bottom: 50px;
  }
  #zzry > ul > div > p {
    text-align: center;
    color: #37a;
    line-height: 60px;
  }
  
  #rmdsj > ul {

    display: flex;
    flex-wrap:wrap;
    left: 40px;
    width: 800px;
    height: 460px;
  }
  #rmdsj > ul > div > li{
    display: flex;
    flex-wrap:wrap; /*flex布局换行  默认是不换行*/
    width: 150px;
    height: 160px;   
    margin:0px 15px;
    

  }
  #rmdsj > ul > div > li:hover{
    border:0px solid #00bcd4;
    box-shadow: 0px 0px 15px 0px #00bcd4;
    cursor:pointer;
  }
  #rmdsj > ul > div{
    display: flex;
    flex-wrap:wrap;
    width: 150px;
    height: 180px;
    padding-bottom: 50px;
  }
  #rmdsj > ul > div > p {
    text-align: center;
    color: #37a;
    line-height: 60px;
  }
  
  
  h2.taitle_secend{
    height: 50px;
    line-height: 50px;
    color: #666;
    padding: 10px;
    border-bottom: 1px solid #999;
    margin-bottom: 20px;/*距离边框向下20PX*/
    
  }
  
  #koubei{
    width: 300px;
    display: block;
    font-size: 13px;
    line-height: 1.62;
    left: 80px;
  }
  #koubei > table > tbody > tr > td{
    border-bottom: 1px solid #eaeaea;
    padding: 7px 0;
  }
  #hezuo{
    width: 300px;
    display: block;
    font-size: 17px;
    line-height: 1.62;
    left: 78px;
    top: 118px;
    color:#FFEB3B;
  }
  /*#hezuo > li{
    left: 80px;
    font-size: larger;
    color: limegreen; top:-15px;
    top:100px;
    border-bottom: 1px solid #eaeaea;
    padding: 7px 0;
  }*/






  #container2{
      width: 600px;
      height: 400px;
      position: relative;      
      cursor:pointer;
      left: 111px;
    }
   /* #container2:hover .arrow{
      display: block;
    }*/
    #num{
      z-index: 100;
            position: absolute;
            bottom: 10px;
            left: 50%;
            /*
            params:平移 旋转 缩放
            */
            transform: translate(-50%,0) ;
    }
    #num > li{
      width: 22px;
      height: 20px;
      background: #03a9f4;
      border-radius: 50%;
      float: left;
      text-align: center; 
      line-height: 20px;
      margin: 5px;
      cursor: pointer;
    }
    #pic{
            position: absolute;
            
    }
    #pic > li{
            position: absolute;
            display: none;
    }
    .arrow{
      z-index: 1000;
      width: 20px;
      height: 40px;
      position: absolute;
      background: rgba(0,0,0,0.5);
      top: 50%;
      transform: translate(0,-50%) ;
      text-align: center;
      line-height: 40px;
      display: none;
      

    }
    .arrow > a{
      color: #fff;
      text-decoration: none;

    }
    #left{
      left: 10px;
    }
    #right{
      right: 10px;
    }
    #pic > .active{
      display: block;
    }
    #num > .active{
      background: red;
    }
    #dyny{
      margin-top: 28px;
    }

    #product_score{
      width: 600px;
      height: 400px;
    }
    #dingbu{          
      height: 28px;
      background: #545652;
    }
    .denglu{
      float: right;
      width: 150px;
      height: 28px;
      background: #545652;
    }
    .denglu > a{
      color: #D5D5D5;
      cursor: pointer;
      text-decoration: none;
      top: 3px;
    }
    .a1{
      left: 30px;
    }
    .denglu > a:hover{
      color: #ffffff;
    }
    #yidong{
      width: 300px;
      height: 50px;
      left: 80%;
      top: -11%;
    }
    .dym{
      text-align: -webkit-center;
      margin-top: 11%;
      text-decoration: none;
      /*color: rgb(0, 191, 255);*/
      width: 100px;
      right: -25px;
    }

    h2.taitle_secend {
        font-weight: 600;
        font-size: 28px;
        font-family: "黑体";
        color: #8c888b;
        background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
        -moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
        -ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
        color: transparent;
        /*设置字体颜色透明*/
        -webkit-background-clip: text;
        /*背景裁剪为文本形式*/
        animation: ran 5s linear infinite;
        /*动态10s展示*/
    }
    @keyframes ran {
        from {
            backgroud-position: 0 0;
        }
        to {
            background-position: 2000px 0;
        }
    }
    
    #koubeicolor{
      color: limegreen;
    }
        
  
  </style> 
 </head> 
 <body background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547811721115&di=daa2e0e3298ba93855260491e0d627e1&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fblog%2F201311%2F01%2F20131101162031_Pa4wA.jpeg" > 
  
   <div id="header"> 
   <div id="dingbu">
     <div class="denglu">
       <a href="">登陆</a>
       <a href="" class="a1">注册</a>
     </div>
   </div>


    <div class="row"> 
     <a href="" style="color:rgba(81, 203, 238, 1);
                    font-size: 35px;
                    text-decoration: none;
                    top: 28px;
                    font-weight: 600; left:8%; width: 155px; margin-top: -10px; height: 50px;">酷睿影评</a> 
                    
     <div class="input_group"> 
      <input type="text" id="search_txt" placeholder="搜索电影，电视剧，影人" />        
      <input type="button" id="search_btn" value="搜索" / > 
     </div> 
     <!-- <div style="width: 200px;
    left: 170px; top: 10px; left: 994px;"> 
      <a href="https://movie.douban.com/annual/2018?source=movie_navigation"><img src="https://img3.doubanio.com/dae/accounts/resources/8c80301/movie/assets/annual_2018.png" alt=""  /></a> 
     </div> --> 
    </div> 

    <div id="yidong">
    <marquee scrollamount=4 width=60 height=40 scrolldely="10" align="center" ><b><font style="font-weight: normal; font-size: 33px; line-height: normal; font-style: normal; font-variant: normal" face=华文彩云 color=#00BFFF><b>欢迎来到酷睿影评</b></font></b></marquee>
    </div>

    </div>
    <!-- end row1 --> 
    <div id="container">
    <div id="middle"> 
     <div id="left"> 
      <div class="row"> 
       <a href="https://movie.douban.com/annual/2018" style="top: 20px;
    width: 900px;
    height: 100px;
    left: 170px;"><img src="1.png" alt="" style="width: 900px;
    height: 100px; left: -188px;"></a> 
       <!-- /*文本不换行*/ --> 
      </div> 


      <div id="dyny">
      <h2 class="taitle_secend">每周推荐</h2>  

      <div id="product_score"> 
<!-- <div id="container2">
   <ul id="num">
       <li class="active">1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
   </ul>
   <ul id="pic">
       <li class="active"><img src="11.jpg" alt=""></li> 
       <li><img src="22.jpg" alt=""></li>
       <li><img src="33.jpg" alt=""></li>
       <li><img src="44.jpg" alt=""></li>
       <li><img src="55.jpg" alt=""></li>
    
   </ul>
   <div class="arrow" id="left"><a href="javascript:left();"></a></div>
   <div class="arrow" id="right"><a href="javascript:right();">></a></div>
    
   </div> -->
   </div>

<!-- <script>

var num = document.getElementById('num');
var pic = document.getElementById('pic');
document.getElementById('container')


var nums = num.getElementsByTagName('li');
var pics = pic.getElementsByTagName('li');



var arrows = document.querySelectorAll('.arrow')
var idx = 0;
  
function toNum(num) {

  //把所有的li的active样式去掉
  for(var i in nums){
    nums[i].className='';
    pics[i].className='';

  }

  //让第num个li拥有active样式
  nums[num].className='active'
  pics[num].className='active'
}

toNum(0);//  -5

Array 
.from(nums)
.forEach((item,index)=>{
  item.onclick = e=>toNum(index);
});



function left(){
   idx = Math.abs(idx-1+5) % 5;
   toNum(idx);
}
function right(){
   idx = Math.abs(idx+1+5) % 5;
   toNum(idx);
}
var flag = setInterval(right,2000);

container2.onmouseenter = function() {
  clearInterval(flag);
  
  }

container2.onmouseleave = function () {
  flag = setInterval(right,2000);
  

}

</script>   -->

     
      <div id="zzry" style="top:20px"> 
       
      </div> 
      <!-- end pei zhi --> 
      <div id="rmdsj" style="top:20px"> 
       
      </div>  
               
      
     </div>
     <!-- end left --> 
     </div> <!-- end dynr -->
     <div id="right">
       <div style="height:200px">
         <a href="http://www.hongmaoxueyuan.com/"><img src="123.png" height="250" width="300" alt="" style="    width: 320px;
    height: 100px;
    left: 73px; top: 20px;"></a>
       </div>
       <span style="left: 80px;
    font-size: larger;
    color: limegreen; top:-15px;">口碑榜</span>
       <div id="koubei">
         <!-- <table>
           <tbody>
             <tr>
               <td>1</td>
               <td></td>
             </tr>
             <tr>
               <td>2</td>
               <td></td>
             </tr>
             <tr>
               <td>3</td>
               <td></td>
             </tr>
             <tr>
               <td>4</td>
               <td></td>
             </tr>
             <tr>
               <td>5</td>
               <td></td>
             </tr>
             <tr>
               <td>6</td>
               <td></td>
             </tr>
             <tr>
               <td>7</td>
               <td></td>
             </tr>
             <tr>
               <td>8</td>
               <td></td>
             </tr>
             <tr>
               <td>9</td>
               <td></td>
             </tr>
             <tr>
               <td>10</td>
               <td></td>
             </tr>
           </tbody>
         </table> -->
       </div>

       <div id="hezuo">
         
         <h2 >酷睿合作联系</h2>
         <li>电影合作邮箱: 270191596@qq.com</li>
         <li>电视剧合作邮箱:993484765@qq.com </li>
         <li>酷睿影人PRO合作邮箱：347155192@qq.com</li>
       </div>

    <!-- <style type="text/css">
    .div1 {
        width: 500px;
        height: 200px;
        background: #eee;
        overflow: auto;
    }  
    </style>
    <div class="div1">
        
    </div> -->

     </div> <!-- end right -->
      
    </div>  <!-- end middle -->
     
    
    <div id="footer"> 
     <span style="left: 64px;top: 58px;"><a href="#header" style="color: #27a;
                    font-size: 15px;
                    text-decoration: none;                    
                    font-weight: 900;">回到顶部</a></span> 
     
    </div> 
    <!-- end footer --> 
    </div>
  </div>
  <script src="ejs.min.js"></script>
  <script id="temp1" type="text/template">
  <h2 class="taitle_secend">最新电影</h2> 
       <ul>
       <%  for(var i=0;i<10;i++){  %>
              <div><li><img src="<%=hmovie[i].movie_cover%>" alt=""></li><a href="" class="dym"><%=hmovie[i].movie_name%></a></div>
        <%  }  %>
       </ul>
  </script>
  <script>
    var data = null;
      fetch('/CoolReal/hmovie').then(function(res) {
        return res.json();
      }).then(function(data) {
        if (!data) {
          return;
        }
        var tmep1 = document.getElementById('temp1');
        var html = ejs.render(tmep1.innerHTML, {hmovie: data});
        var home_movie = document.getElementById('zzry');
        home_movie.innerHTML = html;
      });
  </script>


  <script id="temp2" type="text/template">
  <h2 class="taitle_secend">最新电视剧</h2> 
        <ul>
         <%  for(var i=0;i<10;i++){  %>
              <div><li><img src="<%=htv[i].movie_cover%>" alt=""></li><a href="" class="dym"><%=htv[i].movie_name%></a></div>
        <%  }  %>
       </ul>
  </script>
  <script>
    var data = null;
      fetch('/CoolReal/htv').then(function(res) {
        return res.json();
      }).then(function(data) {
        if (!data) {
          return;
        }
        var tmep2 = document.getElementById('temp2');
        var html = ejs.render(tmep2.innerHTML, {htv: data});
        var home_TV = document.getElementById('rmdsj');
        home_TV.innerHTML = html;
      });
  </script>

  
  <script id="temp4KouBei" type="text/template">
      <table>
        <tbody>
        <% console.log(koubei);
        for(var i in koubei){
        if(i>=10) return;  %>
          <tr>
            <td id="koubeicolor"><%=i*1+1%>&nbsp;&nbsp;<%=koubei[i].movie_name%></td>
          </tr>
        <%  }  %>
        </tbody>
      </table>
  </script>
  <script>
      var data = null;
      fetch('/CoolReal/koubeibang').then(function(res) {
        return res.json();
      }).then(function(data) {
        if (!data) {
          return;
        }
        var temp4KouBei = document.getElementById('temp4KouBei');
        var html = ejs.render(temp4KouBei.innerHTML, {koubei: data});
        var showKouBei = document.getElementById('koubei');
        showKouBei.innerHTML = html;
      });
  </script>

  <script id="temp4AD" type="text/template">
        <%  console.log(ad);  %>
        <div id="container2">
           <ul id="num">
               <li class="active">1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
           </ul>
           <ul id="pic">
              <li class="active"><a href="<%=ad[0].adPath%>"><img src="<%=ad[0].adPicture%>" alt="" ></a>></li>
            <% for(var i=1;i<5;i++){%>
               <li><a href="<%=ad[i].adPath%>"><img src="<%=ad[i].adPicture%>" alt=""></a></li>
            <%}%>
           </ul>
           <div class="arrow" id="left"><a href="javascript:left();"></a></div>
           <div class="arrow" id="right"><a href="javascript:right();">></a></div>
        </div> <!-- end container2 -->
  </script>
  <script>
      var data = null;
      fetch('/CoolReal/showad').then(function(res) {
        return res.json();
      }).then(function(data) {
        if (!data) {
          return;
        }
        var temp4AD = document.getElementById('temp4AD');
        var html = ejs.render(temp4AD.innerHTML, {ad: data});
        var lunbotu = document.getElementById('product_score');
        lunbotu.innerHTML = html;

var num = document.getElementById('num');
var pic = document.getElementById('pic');
document.getElementById('container')


var nums = num.getElementsByTagName('li');  
var pics = pic.getElementsByTagName('li');



var arrows = document.querySelectorAll('.arrow')
var idx = 0;
  
function toNum(num) {

  //把所有的li的active样式去掉
  for(var i in nums){
    nums[i].className='';
    pics[i].className='';

  }

  //让第num个li拥有active样式
  nums[num].className='active'
  pics[num].className='active'
}

toNum(0);//  -5

Array 
.from(nums)
.forEach((item,index)=>{
  item.onclick = e=>toNum(index);
});



function left(){
   idx = Math.abs(idx-1+5) % 5;
   toNum(idx);
}
function right(){
   idx = Math.abs(idx+1+5) % 5;
   toNum(idx);
}
var flag = setInterval(right,2000);

container2.onmouseenter = function() {
  clearInterval(flag);
  
  }

container2.onmouseleave = function () {
  flag = setInterval(right,2000);
  

}

      });
  </script>

 </body>
</html>